<template>
	<view class="smartSports">
		<view class="left_tabBtn">
			<view class="avator" >
				<image class="avator_img" src="../../static/icons/wrong_man.png" mode="widthFix"></image>
				<text class="userName">{{userInfo}}</text>
			</view>
			<view class="tabBtn_con">
				<view class="tabBtn" @click="change_tabsToindex">
					<uni-icons :class="{icons_tab:true,current_tab:current_tab == 'index'}" type="home"  ></uni-icons>
					<text :class="{current_tab:current_tab == 'index'}">首页</text>
				</view>
				<view class="tabBtn" @click="change_tabsTostudents_info">
					<uni-icons :class="{icons_tab:true,current_tab:current_tab == 'students_info'}" type="person" ></uni-icons>
					<text :class="{current_tab:current_tab == 'students_info'}">学生信息</text>
				</view>
			</view>
		</view>
		<view v-show="current_tab == 'index'"  class="right_nav">
			<view class="title_top">
				<view class="title_font">
					<image class="company_logo" src="../../static/icons/logo.svg" mode="widthFix"></image>
					<text class="company_font">旷览智慧体育</text>
				</view>
				<view class="location">
					<uni-icons type="location" ></uni-icons>
					<text>无锡市天一中学</text>
				</view>
			</view>
			<view class="card_con">
				<!-- 自制 导航卡片 -->
				<index-card :navigateUrl="'/pages/fastTest/fastTest'" :fontColor="'#908cae' " backColor="#eee6ff"  :back_url=" '../../static/icons/clock.png'">
					<template #title>
						快速测试
					</template>
					<template #tip>
						无需名单 即开即测
					</template>
				</index-card>
				<index-card :navigateUrl="'/pages/testCenter/testCenter'" :fontColor="'#c26e6e' "  backColor="#fee5e2" :back_url=" '../../static/icons/score_index.png' ">
					<template #title>
						随堂测试
					</template>
					<template #tip>
						名单记录 报告分析
					</template>
				</index-card>
				<index-card :navigateUrl="'/pages/sportsTest/sportsTest'" :fontColor="'#85b874' "  backColor="#ebf6c6"   :back_url=" '../../static/icons/weight.png' ">
					<template #title>
						国家体测
					</template>
					<template #tip>
						9-12月 健康体质测试
					</template>
				</index-card>
				<index-card :navigateUrl="'/pages/freeTest/freeTest'" :fontColor="'#547391' " backColor="#b8d9e5" :back_url=" '../../static/icons/playground.png' ">
					<template #title>
						自由练习
					</template>
					<template #tip>
						课下练习 智能触发
					</template>
				</index-card>
			</view>
		</view>
		
		<view v-show="current_tab == 'students_info'" class="students_info_tabs">
			<view class="uniTabs_con">
				<uniTabs :list="tablist"></uniTabs>
				<view class="shai_btn" @click="isShowFiltrate = true">
					<uni-icons class="bars_icon" type="bars" ></uni-icons>
					<text>筛选</text>
				</view>
			</view>
			<view class="grade_tip">
				<text class="big_classTip">{{gradeName}}</text>
				<text class="tatal_class">共{{reactive_obj.class_list.length}}个班级</text>
			</view>
			<view class="basicClass">
				<view class="uni-container">
							<uni-table ref="table" :loading="loading"   emptyText="暂无更多数据">
								<uni-tr>
									<uni-th width="150" align="center">年级</uni-th>
									<uni-th width="150" align="center">班级名称</uni-th>
									<uni-th align="center">班级人数</uni-th>
									<uni-th width="204" align="center">人脸录入进度</uni-th>
									<uni-th width="204" align="center">操作</uni-th>
								</uni-tr>
								<uni-tr v-for="(item, index) in reactive_obj.class_list" :key="index">
									<uni-td class="uniTd" align="center">{{ gradeName }}</uni-td>
									<uni-td align="center">
										<view class="name">{{ item.Name }}</view>
									</uni-td>
									<uni-td align="center">{{ item.total }}人</uni-td>
									<uni-td align="center">
										<view class="uni-group">
											<Progress :progress="item.progress"></Progress>
										</view>
									</uni-td>
									<uni-td align="center">
										<view class="uni-group">
											<button class="uni-button" size="mini" type="primary" @click="goClassDetail(item.Name,item.ClassID)">查看</button>
										</view>
									</uni-td>
								</uni-tr>
							</uni-table>
				</view>
			</view>
			
			<view class="subentry">
				
			</view>
			
		</view>
		<view class="filtrate" v-show="isShowFiltrate">
			<text class="filtrate_font">请选择</text>
			<view class="select_conModel">
				<uni-data-select
						v-show="!isShowSelectGrade"
				      v-model="filtrate_select_conModel"
				      :localdata="reactive_obj.select_school"
				      @change="select_school_method"
					  placeholder="请选择学校"
				    ></uni-data-select>
				<uni-data-select
						v-show="isShowSelectGrade"
				      v-model="filtrate_select_conModel_grade"
				      :localdata="reactive_obj.select_grade"
				      @change="select_grade_method"
					  placeholder="请选择年级"
				    ></uni-data-select>	
			</view>
			
			<view class="popup_btn_con">
				<myBtn class="popup_btn" @click="close_filtrate_method" title="取消" color="#aaa" width="15vw" height="6vh"></myBtn>
				<myBtn class="popup_btn" @click="confirm_filtrate_method" title="确定" color="#0aa1ed" width="15vw" height="6vh"></myBtn>
			</view>
		</view>
		<view v-show="isShowFiltrate" class="mask_choose">
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref,reactive, onMounted } from "vue";
	import indexCard from "../../components/indexCard/indexCard.vue" ;
	import requester from "../../server/requester";
	let userToken:any
	let userInfo:any = ref('')
	let reactive_obj = reactive({
		class_list:[
			// {grade:'高一',class:"高一1班",peoplecount:25},
			// {grade:'高一',class:"高一1班",peoplecount:25},
			// {grade:'高一',class:"高一1班",peoplecount:25},
			// {grade:'高一',class:"高一1班",peoplecount:25},
			// {grade:'高一',class:"高一1班",peoplecount:25},
			// {grade:'高一',class:"高一1班",peoplecount:25},
			// {grade:'高一',class:"高一1班",peoplecount:25},
			// {grade:'高一',class:"高一1班",peoplecount:25},
			// {grade:'高一',class:"高一1班",peoplecount:25},
			// {grade:'高一',class:"高一1班",peoplecount:25},
			// {grade:'高一',class:"高一1班",peoplecount:25},
			// {grade:'高一',class:"高一1班",peoplecount:25},
			// {grade:'高一',class:"高一1班",peoplecount:25},
			// {grade:'高一',class:"高一1班",peoplecount:25},
			// {grade:'高一',class:"高一1班",peoplecount:25},
		]as any[],//班级列表
		
		select_grade:[]as any[],//年级选择框列表
		select_school:[{ value: 0, text: "天一中学" },]as any[],//学校选择框列表
	})
	
	const getClassList = async(GradeID:number)=>{
		let data = {
				 GradeID: GradeID,
				}
		let result:any = await requester({
			url:'/AiSports/Class/Query',
			method:'POST',
			data,
			headers:{
				token:userToken
			}
		})
		
		console.log( '获取到的请求结果====>>>', result);
		
		reactive_obj.class_list =  result.data.clazzList
		reactive_obj.class_list.forEach(v=>{
			if(v.faceTotal == 0 ||  v.total == 0){
				v.progress = 0 
				console.log("v.progress===>>",v.progress);
			}else{
				v.progress = (v.faceTotal / v.total) * 100
				console.log("v.progress===>>",v.progress);
			}
		})
	}
	
	
	const goMethod = () => {
		console.log('我去了这里');
		uni.navigateTo({
			url:'/pages/freeTest/freeTest',
		})
	}
	
	const goClassDetail = (className:string,classId:string) => {
		console.log('className===>>',className);
		console.log('classId===>>',classId);
		uni.navigateTo({
			url:'/pages/classDetail/classDetail?className='+className+"&classId="+classId,
		})
	}
	let current_tab = ref('index')
	let tablist = ["行政班","分项班"]
	const change_tabsToindex = ()=>{
		current_tab.value = "index"
	}
	const change_tabsTostudents_info= ()=>{
		current_tab.value = "students_info"
	}
	
	let loading = ref(false)
	
	
	let isShowSelectGrade = ref(false)
	//年级名称
	let gradeName = ref('高一')
	let isShowFiltrate = ref(false)
	//双向绑定 学校选择框
	let filtrate_select_conModel = ref('')
	const select_school_method = (e:any)=>{
		console.log('我是学校选择框监听值变化的函数',e);
		isShowSelectGrade.value = true
	}
	
	//双向绑定 年级选择框
	let filtrate_select_conModel_grade:any = ref()
	
	
	const get_grade= async()=>{
		let data = {
				}
		let result:any = await requester({
			url:'/AiSports/grade/Query',
			method:'POST',
			data,
			headers:{
				token:userToken
			}
		})
		
		console.log( '获取到的请求结果  年级====>>>', result);
		let list = []
		result.data.gradeList.forEach((v:any)=>{
			let obj:any = {}
			obj.value = v.id 
			obj.text = v.name
			list.push(obj)
		})
		reactive_obj.select_grade = list
		console.log('选择框列表',reactive_obj.select_grade);
	}  
	let currentGradeName :any = null
	const select_grade_method = (e:any)=>{
		reactive_obj.select_grade.forEach((v:any)=>{
			if(v.value == e ){
				currentGradeName = v.text
			}
		})
		console.log('我是年级选择框监听值变化的函数',e , currentGradeName);
		
	}
	
	//model框 取消事件
	const close_filtrate_method = ()=>{
		isShowFiltrate.value = false
		isShowSelectGrade.value = false
	}
	//model框 确认事件
	const confirm_filtrate_method = ()=>{
		//获取新列表
		getClassList(filtrate_select_conModel_grade.value)
		if (currentGradeName != null) {
			gradeName.value = currentGradeName
		}
		isShowFiltrate.value = false
		isShowSelectGrade.value = false
	}
	
	
	
	onMounted(()=>{
		try {
			userToken = uni.getStorageSync('user_token');
			userInfo.value = uni.getStorageSync('userInfo');
			console.log("userToken====>>>",userToken);
			if (userToken == "") {
				uni.navigateTo({
					url:'/pages/login/login',
				})
			}
			//高一
			getClassList(2)
			get_grade()
		} catch (e) {
			// error
			uni.navigateTo({
				url:'/pages/login/login',
			})
		}
	})
</script>

<style>
	.smartSports {
		display: flex;
		width: 100vw;
		height: 100vh;
	}
	.left_tabBtn{
		width: 8vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20vh;
		background-color: #fff;
		border-right: 1px solid #f1f1f1;
	}
	.avator{
		display: flex;
		flex-direction: column;
	}
	.avator_img{
		width: 4vw;
		border-radius: 50%;
		border: 1px solid red;
		margin-bottom: 3vh;
	}
	.tabBtn_con{
		display: flex;
		flex-direction: column;
		margin-top: 17vh;
	}
	.icons_tab{
		font-size: 2rem !important;
	}
	.tabBtn{
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 0.6rem;
		margin: 3vh 0;
	}
	.current_tab{
		color: #0aa1ed !important;
	}
	.right_nav{
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		align-items: center;
	}
	.title_top{
		display: flex;
		flex-direction: column;
		margin: 20vh 0 5vh 0;
	}
	.title_font{
		display: flex;
		align-items: center;
		
	}
	.company_logo{
		width: 3vw;
		margin: 0 1vw;
	}

	.company_font{
		font-size: 2rem;
	}
	.location{
		margin: 1vh auto ;
		width: 18vw;
		padding: 1vh 0;
		background-color: #f4f4f4;
		border-radius: 2.5vh;
		font-size: 0.8rem;
		text-align: center;
	}
	.card_con{
		display: flex;
		flex-shrink: 0;
		flex-grow: 0;
		overflow: auto;
		width: 80vw;
		/* background-color: v-bind('title'); */
		/* background-color: cornflowerblue; */
		margin-top: 5vh;
		height: 43vh;
	}
	.card_con::-webkit-scrollbar{
		width:0
	}
	
	.students_info_tabs{
		display: flex;
		flex-direction: column;
		align-items: center;
		flex-grow: 1;
	}
	.uniTabs_con{
		display: flex;
		margin-top: 5vh;
		justify-content: space-between;
		width: 50vw;
		margin-left: 20vw;
		align-items: center;
		height: 8vh;
	}
	.shai_btn{
		display: flex;
		width: 7vw;
		align-items: center;
		justify-content: space-around;
		border: 1px solid #0aa1ed;
		border-radius: 2vw;
		height: 60%;
		font-size: 0.8rem;
		color: #0aa1ed !important;
	}
	.bars_icon{
		font-size: 0.8rem !important;
		color: #0aa1ed !important;
	}
	.basicClass{
		width: 100%;
		background-color: #f8f8f8;
		padding: 2vh 2vw 0 2vw;
		box-sizing: border-box;
		flex-grow: 1;
		overflow: auto;
		/* position: relative; */
	}
	.grade_tip{
		padding:2vh 0 0 2vw;
		/* position: fixed;
		top: 13vh;
		left: 10vw;
		z-index: 1; */
		width: 100%;
		box-sizing: border-box;
		/* height: 8vh; */
		background-color: #f8f8f8;
		align-items: center;
		display: flex;
	
	}
	.big_classTip{
		font-size: 1.5rem;
		margin-right: 2vw;
	}
	.uni-container{
		/* margin-top: 9vh; */
	}
	.userName{
		text-align: center;
	}
	.filtrate{
		position: absolute;
		width: 40vw;
		height: 25vw;
		left: 50% ;
		top: 50%;
		background-color:  #f8f8f8;
		z-index: 1000000;
		transform: translateX(-50%) translateY(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.mask_choose{
		    position:fixed;
		    top     : 0;
		    left    : 0;
		    bottom  : 0;
		    right   : 0;
		    background:rgba(0,0,0,.5); 
	}
	.filtrate_font{
		width: 100%;
		display: block;
		height: 5vh;
		background-color: #fff;
		text-align: center;
		padding-top: 3vh ;
	}
	.select_conModel{
		width: 80%;
		margin: 5vh;
		height: 30%;
	}
	.popup_btn_con{
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 10vh ;
		background-color: #fff;
	}
</style>
